<template>
    <el-card>
        <div class="title">专升本报名</div>
        <el-form ref="registrationFormRef"
                 :model="registrationForm"
                 :rules="registrationRules"
                 status-icon
                 label-width="120px"
                 class="demo-registrationForm">
            <el-form-item prop="name" label="姓名">
                <el-input v-model="registrationForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item prop="studentId" label="学号">
                <el-input v-model="registrationForm.studentId" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item prop="major" label="专业">
                <el-input v-model="registrationForm.major" placeholder="请输入专业"></el-input>
            </el-form-item>
            <el-form-item prop="contact" label="联系方式">
                <el-input v-model="registrationForm.contact" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <!-- 可以添加更多报名所需字段 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import type {FormInstance, FormRules} from 'element-plus';

const registrationFormRef = ref<FormInstance>();

// 表单对象
interface RegistrationForm {
    name: string;
    studentId: string;
    major: string;
    contact: string;
    // 定义其他需要的表单项
}

const registrationForm = reactive<RegistrationForm>({
    name: '',
    studentId: '',
    major: '',
    contact: ''
});

// 表单规则
const registrationRules = reactive<FormRules<RegistrationForm>>({
    name: [
        {required: true, message: '姓名不能为空', trigger: 'blur'}
    ],
    studentId: [
        {required: true, message: '学号不能为空', trigger: 'blur'}
    ],
    major: [
        {required: true, message: '专业不能为空', trigger: 'blur'}
    ],
    contact: [
        {required: true, message: '联系方式不能为空', trigger: 'blur'}
    ],
    // 定义其他表单项的校验规则
});

const submitForm = async () => {
    const formEl = registrationFormRef.value;
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('提交报名信息：', registrationForm);
            // 在这里添加提交表单的逻辑，发送请求到后端API
        } else {
            console.error('表单验证失败!', fields);
        }
    });
};

const resetForm = () => {
    const formEl = registrationFormRef.value;
    if (!formEl) return;
    formEl.resetFields();
    registrationForm.name = '';
    registrationForm.studentId = '';
    registrationForm.major = '';
    registrationForm.contact = '';
    // 重置其他表单项
};
</script>

<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}
</style>